import * as React from "react"

import { Text, View, ViewStyle, Image } from "react-native"
import { Screen } from "../../components/screen"
import { Button } from "../../components/button/button"
import { Line } from "../../components/line"
import { Header } from "../../components"
import { px2dp } from "../../utils"
import { color } from "../../theme/base/color"
import { images } from "../../assets"

// 通用样式

const RecordItemStyle: ViewStyle = {
  paddingTop: px2dp(14),
  paddingBottom: px2dp(14),
  marginBottom: px2dp(14),
  backgroundColor: color.palette.white,
  borderRadius: px2dp(8)
}

const cardHeadeStyle: ViewStyle = {
  borderLeftColor: color.themeColor,
  alignItems: "center",
  borderLeftWidth: px2dp(2),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14),
  flexDirection: "row",
  justifyContent: "space-between"
}

const cardHeadeLeftStyle: ViewStyle = {}

const cardHeadeRightStyle: ViewStyle = {}

const LineStyle: ViewStyle = {
  paddingTop: px2dp(14),
  marginLeft: px2dp(14),
  paddingBottom: px2dp(14)
}

const matchItemStyle: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  paddingTop: px2dp(5),
  paddingBottom: px2dp(5),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14)
}

const matchConfirmedStyle: ViewStyle = {
  position: "absolute",
  right: px2dp(14),
  bottom: px2dp(40)
}

/**
 * 串关详情 Crossroads
 */

interface CrossroadsDetailProps {}

interface CrossroadsDetailState {}

class CrossroadsDetail extends React.Component<CrossroadsDetailProps, CrossroadsDetailState> {
  state = {}
  render() {
    return (
      <View style={RecordItemStyle}>
        <View style={cardHeadeStyle}>
          <View style={cardHeadeLeftStyle}>
            <Text>投注单号: 999999999999</Text>
          </View>
          <View style={cardHeadeRightStyle}>
            <Button
              text="复制"
              onPress={() => {
                alert("复制成功")
              }}
            />
          </View>
        </View>
        <View style={LineStyle}>
          <Line />
        </View>
        <View>
          <View style={matchItemStyle}>
            <Text>维多利亚-0.5</Text>
            <Text style={{ color: color.themeColor }}>@0.8</Text>
          </View>
          <View style={matchItemStyle}>
            <Text style={{ color: color.info, fontSize: px2dp(12) }}>滚球 让球（0:0）</Text>
          </View>
          <View style={matchItemStyle}>
            <Text style={{ color: color.info, fontSize: px2dp(12) }}>维多利亚 v 瓦达克斯家</Text>
          </View>
          <View style={matchItemStyle}>
            <View style={{ flexDirection: "row" }}>
              <Text style={{ color: color.info }}>本金</Text>
              <Text>$10.00</Text>
            </View>
            <View style={{ flexDirection: "row" }}>
              <Text style={{ color: color.info }}>返还</Text>
              <Text>$10.00</Text>
            </View>
          </View>
          <View style={matchConfirmedStyle}>
            <Text style={{ fontSize: 12, color: color.info }}>已确认</Text>
          </View>
          <View style={{ position: "absolute", right: px2dp(14), bottom: px2dp(10) }}>
            <Image
              style={{ width: px2dp(71), height: px2dp(74) }}
              source={images.mine.betRecord.winGame}
            />
          </View>
          <View style={matchConfirmedStyle}>
            <Text style={{ fontSize: 12, color: "green" }}>输</Text>
          </View>
          <View style={matchConfirmedStyle}>
            <Text style={{ fontSize: 12, color: color.info }}>和</Text>
          </View>
        </View>
      </View>
    )
  }
}

/**
 * 单场详情 single game
 */

interface SingleGameDetailProps {}

interface SingleGameDetailState {}

class SingleGameDetail extends React.Component<SingleGameDetailProps, SingleGameDetailState> {
  state = {}
  render() {
    return <Text>单场</Text>
  }
}

export interface RecordDetailScreenProps {
  location: any
  history: any
}

export interface RecordDetailScreenState {
  detailType: any
}

class RecordDetailScreen extends React.Component<RecordDetailScreenProps, RecordDetailScreenState> {
  state = {
    detailType: undefined
  }
  componentDidMount = () => {
    // 获取页面参数
    console.log(this.props.location.query)
  }

  render() {
    return (
      <Screen style={{ backgroundColor: color.backgroundInnerPage }} statusBar="dark-content">
        <Header
          leftIcon="back"
          rightIcon="bullet"
          onLeftPress={() => this.props.history.goBack()}
          headerTx="投注详情"
          titleStyle={{ color: color.palette.black }}
          style={{ backgroundColor: color.palette.white }}
        />
        <View style={{ padding: px2dp(14) }}>
          <CrossroadsDetail />
          <SingleGameDetail />
        </View>

        <Line />
        <Button text="复制按钮" />
      </Screen>
    )
  }
}

export default RecordDetailScreen
